<template>
  <div class="text-xs text-[#fff] lg:w-[330px] lg:h-[320px]">
    <!-- cancel 按钮 -->
    <div class="flex justify-end lg:hidden mt-2 mb-10">
      <van-icon @click="closeRightLogin" class="mr-2.5 mt-1" name="cross" color="#fff" size="20px" />
    </div>

    <div class="flex flex-col items-center justify-center">
      <y-image
        class="lg:hidden mt-3 mb-9 w-[167px] h-[200px]"
        placeholder
        alt="BitTopup Welcome Banner"
        src="home-imgs/login-icon.png"
        width="167"
        height="200" />
      <y-image
        class="hidden lg:block mt-3 mb-8 w-[266px] h-[187px]"
        placeholder
        alt="BitTopup Welcome Banner"
        src="home-imgs/pchome_pic_signin.png"
        width="266"
        height="187" />
      <div class="grid grid-cols-1 gap-x-3 lg:grid-cols-2">
        <button
          name="button"
          v-for="(item, index) in list"
          @click="item.event(index)"
          class="w-[151px] lg:w-[130px] h-12 text-sm py-0.5 px-3 rounded-lg mb-7 border-red1 border-[2px] text-red1"
          :class="{ 'bg-red1': active === index, 'is-active': active === index }">
          {{ item.text }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'
import WImage from '../logic/WImage.vue'

const { $mt } = useCommonPlugin()
const active = ref(0)

const { $pushRoute } = useCommonPlugin()
const router = useRouter()
const props = defineProps(['showLoginRight'])
const emit = defineEmits(['changeShowStatus'])
const closeRightLogin = () => {
  emit('changeShowStatus', false)
}
const route = useRoute()

const goLoginView = (index) => {
  active.value = index
  $pushRoute(`/sso/login?redirectTo=${route.fullPath}`)
}
const goRegView = (index) => {
  active.value = index
  $pushRoute(`/sso/register?redirectTo=${route.fullPath}`)
}

const list = ref([
  {
    text: $mt('SIGN IN'),
    event: goLoginView,
  },
  {
    text: $mt('SIGN UP'),
    event: goRegView,
  },
])
</script>

<style scoped lang="scss">
.is-active {
  color: #fff;
}
</style>
